import React from 'react';
import { Card, Button, Tag } from 'antd';
import { ShoppingCartOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { Product } from '../../services/product.service';

const { Meta } = Card;

interface ProductCardProps {
  product: Product;
  seckillPrice?: number;
  isSeckill?: boolean;
}

const ProductCard: React.FC<ProductCardProps> = ({ product, seckillPrice, isSeckill = false }) => {
  const navigate = useNavigate();

  const handleViewDetail = () => {
    navigate(`/products/${product.id}`);
  };

  return (
    <Card
      hoverable
      style={{ width: '100%', marginBottom: 16 }}
      cover={
        <div style={{ height: 200, overflow: 'hidden', position: 'relative' }}>
          <img 
            alt={product.name} 
            src={product.imageUrl} 
            style={{ width: '100%', height: '100%', objectFit: 'cover' }} 
          />
          {isSeckill && (
            <Tag color="red" style={{ position: 'absolute', top: 10, right: 10, fontSize: 14, padding: '2px 8px' }}>
              秒杀
            </Tag>
          )}
        </div>
      }
      actions={[
        <Button key="view" type="link" onClick={handleViewDetail}>
          查看详情
        </Button>,
        <Button 
          key="buy" 
          type="primary" 
          icon={<ShoppingCartOutlined />} 
          onClick={handleViewDetail}
        >
          {isSeckill ? '立即抢购' : '立即购买'}
        </Button>,
      ]}
    >
      <Meta
        title={product.name}
        description={
          <div>
            {isSeckill ? (
              <div>
                <span style={{ color: 'red', fontSize: 16, fontWeight: 'bold' }}>
                  ¥{seckillPrice?.toFixed(2)}
                </span>
                <span style={{ textDecoration: 'line-through', color: '#999', marginLeft: 8 }}>
                  ¥{product.price.toFixed(2)}
                </span>
              </div>
            ) : (
              <span style={{ color: '#f50', fontSize: 16 }}>¥{product.price.toFixed(2)}</span>
            )}
            <div style={{ marginTop: 8, height: 40, overflow: 'hidden', textOverflow: 'ellipsis' }}>
              {product.description}
            </div>
          </div>
        }
      />
    </Card>
  );
};

export default ProductCard; 